<script  setup>
/*
    v-if和v-else可以根据条件决定属性所在标签是否在页面中存在（有没有的问题）
    v-show可以根据条件决定属性所在标签是否在页面中展示或隐藏（显示不显示的问题）
*/
import {ref} from 'vue';

let flag = ref(true)

let change = () => {
  flag.value = !flag.value;
}
let awesome = ref(true)
</script>

<template>
  <div>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    <button @click="awesome = !awesome">Toggle</button>
    <div style="width: 300px; height: 300px; background-color: aqua; visibility: hidden;">

    </div>
    <h1 v-if="flag">真</h1>
    <h1 v-else>假</h1>
    <h1 v-show="flag">真</h1>
    <input type="button" value="点击" @click="change">
  </div>
</template>

<style scoped>

</style>
